<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <!-- 
    收集表单数据:
        若: <input type="text" /> 则v-model收集的是value值，用户输入的就是value
        若: <input type="radio"/> 如果想要v-model收集的是value值，则需要给标签配置value值
        若: <input type="checkbox" /> 
            1.没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)
            2.配置input的value属性:
                (1) v-model的初始值是非数组，那么收集的就是checked(勾选 or 未勾选，是布尔值)
                (2) v-model的初始值是数组，那么收集的就是value组成的数组
           
    备注: v-model的三个修饰符:
        trim 移除数据前后的空格
        lazy 移开焦点后再收集数据
        number 数据转换为数字格式
     -->
  <div id="root">
    <form @submit.prevent="demo">
      <!-- 输入框 -->
      <label for="demo">账号:</label>
      <input type="text" id="demo" v-model.trim="account" />
      <br />
      <label for="demo2">密码:</label>
      <input type="password" id="demo2" v-model="password" />
      <br />
      年龄:<input type="number" v-model.number="age" />
      <br />
      <!-- 单选框 -->
      性别: 男<input type="radio" name="sex" v-model="sex" value="male" />
      女<input type="radio" name="sex" v-model="sex" value="female" />
      <br />
      <!-- 多选框 -->
      爱好: 学习
      <input type="checkbox" v-model="hobby" value="学习" />
      打游戏<input v-model="hobby" type="checkbox" value="打游戏" />
      吃饭<input type="checkbox" v-model="hobby" value="吃饭" />
      <br />
      所属校区
      <!-- 下拉列表 -->
      <select v-model="city">
        <option value="">请选择校区</option>
        <option value="BeiJing">北京</option>
        <option value="ShangHai">上海</option>
      </select>
      <br />
      其他信息:
      <textarea v-model.lazy="other"></textarea>
      <input type="checkbox" v-model="agree" />
      阅读并接受<a href="https://www.baidu.com/index.htm">《用户协议》</a>
      <button>提交</button>
    </form>
  </div>

  <script>
    const x = new Vue({
      el: '#root',
      data: {
        //   userInfo: {
        account: '',
        password: '',
        age: '',
        sex: '',
        hobby: [],
        city: '',
        other: '',
        agree: '',
        //   },
      },
      methods: {
        demo() {
          //  通常不直接写这个;
          console.log(JSON.stringify(this._data));
          // console.log(JSON.stringify(this.userInfo)); 
        },
      },
    });
  </script>
</body>

</html>